<script setup>
import {ref} from "vue";

let message = ref("等待用户输入")

function keyboardEvent(event) {
  // console.log(event.target.value)
  message.value = event.target.value
}

let inputContent = ref("")

function processKey(event) {
  // console.log(event.target.value)
  // 在键盘事件处理过程中，实现赋值
  inputContent.value = event.target.value
  message.value = event.target.value


}
</script>

<template>
  <div>
    <h2 id="displayText">{{ message }}</h2>
    <!-- value 属性是 input 元素的显示内容   -->
<!--    <input type="text" id="textInput" placeholder="请输入任意文本..." v-on:input="keyboardEvent">-->
    <input type="text" id="textInput" placeholder="请输入任意文本..." v-on:input="processKey"  v-bind:value="inputContent">

  </div>
</template>

<style scoped>

</style>